<template>
    <div class="reasonTypePfCall">
        <!-- 列表显示 -->
        <div class="dictmanageMain">
            <el-row>
                <el-form
                    :inline="true"
                    :model="formData"
                    class="demo-form-inline"
                    style="width: 49%;margin-bottom: 16px;display: inline-block;"
                    size="small"
                >
                    <el-form-item prop="status" label-position="left" label="大类状态:">
                        <el-select placeholder="请选择" v-model="formData.status" clearable>
                            <el-option
                                v-for="item in statusOfCall"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <div>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-search"
                            @click="hanleBigsearch"
                            :loading="searchLoading"
                            class="searchBtn"
                        >查询</el-button>
                        <!-- <el-button type="primary" size="small" icon="el-icon-refresh-right" @click="handlebigReset" :loading="resetLoading" class="resetBtn">重置</el-button> -->
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-circle-plus-outline"
                            @click="hanlePush"
                        >新增</el-button>
                    </div>
                </el-form>
                <el-form
                    :inline="true"
                    :model="formDataDetail"
                    class="demo-form-inline"
                    style="margin-bottom: 16px;width: 50%;display: inline-block;margin-left: 1%;"
                    size="small"
                >
                    <el-form-item prop="status" label-position="left" label="小类状态:">
                        <el-select placeholder="请选择" v-model="formDataDetail.status" clearable>
                            <el-option
                                v-for="item in statusOfCall"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <div>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-search"
                            @click="hanleSmallsearch"
                            class="searchBtn"
                        >查询</el-button>
                        <!-- <el-button type="primary" size="small" icon="el-icon-refresh-right" @click="handlesmallReset" class="resetBtn">重置</el-button> -->
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-circle-plus-outline"
                            @click="hanlePushDetail"
                        >新增</el-button>
                        <!-- <el-button type="primary" size="small" icon="el-icon-circle-delete-outline" @click="hanleBatchDeleteDetail" >删除</el-button> -->
                    </div>
                </el-form>
                <el-col :span="12" style="padding-right: 16px;">
                    <el-table
                        :data="bigtableData"
                        width="100%"
                        border
                        highlight-current-row
                        @row-click="handleClick($event, true)"
                        stripe
                        class="heard-bg"
                    >
                        <el-table-column label="类型名称" prop="operationName"></el-table-column>
                        <!-- <el-table-column label="处理约束" prop="operationRes">
                            <template slot-scope="scoped">
                                <span v-if="scoped.row.operationRes === '0'">否</span>
                                <span v-else-if="scoped.row.operationRes === '1'">是</span>
                                <span v-else></span>
                            </template>
                        </el-table-column>-->
                        <el-table-column label="状 态" prop="operationStatus">
                            <template slot-scope="scoped">
                                <span v-if="scoped.row.operationStatus === '0'">未使用</span>
                                <span v-else-if="scoped.row.operationStatus === '1'">使用</span>
                                <span v-else></span>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label="排 序" prop="operationName"></el-table-column> -->
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    type="primary"
                                    icon="el-icon-edit"
                                    circle
                                    @click="handleEdit(scope.row)"
                                />
                                <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    circle
                                    @click="handleDelete(scope.row)"
                                />
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <div class="pagination">
                        <Pagination
                            :hanleChangeCurrentPage="hanleChangeCurrentPage"
                            :handleChangeSize="handleChangeSize"
                            :currentPage="currentPage"
                            :pageSize="pageSize"
                            :total="total"
                        />
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-table
                        :data="smalltableData"
                        width="100%"
                        border
                        @selection-change="handleSelectChange"
                        stripe
                        class="heard-bg"
                    >
                        <el-table-column label="类型名称" prop="operationName"></el-table-column>
                        <!-- <el-table-column label="处理约束" prop="operationRes">
                            <template slot-scope="scoped">
                                <span v-if="scoped.row.operationRes === '0'">否</span>
                                <span v-else-if="scoped.row.operationRes === '1'">是</span>
                                <span v-else></span>
                            </template>
                        </el-table-column>-->
                        <el-table-column label="状 态" prop="operationStatus">
                            <template slot-scope="scoped">
                                <span v-if="scoped.row.operationStatus === '0'">未使用</span>
                                <span v-else-if="scoped.row.operationStatus === '1'">使用</span>
                                <span v-else></span>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label="排 序" prop="operationName"></el-table-column> -->
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    type="primary"
                                    icon="el-icon-edit"
                                    circle
                                    @click="handleEditDetail(scope.row)"
                                />
                                <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    circle
                                    @click="handleDeleteDetail(scope.row)"
                                />
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <div class="pagination">
                        <Pagination
                            :hanleChangeCurrentPage="hanleChangeCurrentPageDetail"
                            :handleChangeSize="handleChangeSizeDetail"
                            :currentPage="currentPageDetail"
                            :pageSize="pageSizeDetail"
                            :total="totalDetail"
                        />
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 新增或者编辑弹框 -->
        <div class="addDialog">
            <el-dialog
                v-drag
                :close-on-click-modal="false"
                :visible.sync="Show"
                append-to-body
                center
                width="500px"
            >
                <div slot="title">{{EditTitle}}</div>
                <el-form
                    :model="Edit"
                    class="menu-setting"
                    label-position="right"
                    ref="Edit"
                    label-width="120px"
                    :rules="formRules"
                    size="small"
                >
                    <el-form-item label="类别名称" prop="operationName">
                        <el-input
                            v-model="Edit.operationName"
                            placeholder="请输入"
                            style="width: 200px;"
                        />
                    </el-form-item>
                    <!-- <el-form-item label="互斥约束" prop="operationRes">
                        <el-checkbox v-model="Edit.operationRes" style="margin-top:7px;">

                        </el-checkbox>
                    </el-form-item>-->
                    <el-form-item
                        label="是否使用"
                        label-width="120px"
                        label-position="left"
                        prop="operationStatus"
                    >
                        <el-radio-group v-model="Edit.operationStatus" style="margin-top:7px;">
                            <el-radio label="1">使用</el-radio>
                            <el-radio label="0">不使用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- <el-form-item label="排序" prop="oderNum">
                        <el-input v-model="Edit.oderNum" placeholder="请输入输入两位正整数值" style="width: 200px;"/>
                    </el-form-item>-->
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button
                        size="small"
                        icon="el-icon-circle-close"
                        @click="Show = false"
                        class="cancelBtn"
                    >取 消</el-button>
                    <el-button
                        type="primary"
                        size="small"
                        @click="submitEdit"
                        class="submitBtn"
                        icon="el-icon-circle-check"
                    >确定</el-button>
                </div>
            </el-dialog>
            <el-dialog
                v-drag
                :close-on-click-modal="false"
                :visible.sync="ShowDetail"
                append-to-body
                center
                width="500px"
            >
                <div slot="title">{{EditTitleDetail}}</div>
                <el-form
                    :model="EditDetail"
                    class="menu-setting"
                    label-position="right"
                    ref="EditDetail"
                    label-width="120px"
                    :rules="formRulesDetail"
                    size="small"
                >
                    <el-form-item label="类别名称" prop="operationName">
                        <el-input
                            v-model="EditDetail.operationName"
                            placeholder="请输入"
                            style="width: 200px;"
                        />
                    </el-form-item>
                    <!-- <el-form-item label="互斥约束" prop="operationRes">
                        <el-checkbox v-model="EditDetail.operationRes" style="margin-top:7px;">

                        </el-checkbox>
                    </el-form-item>-->
                    <el-form-item
                        label="是否使用"
                        label-width="120px"
                        label-position="left"
                        prop="operationStatus"
                    >
                        <el-radio-group
                            v-model="EditDetail.operationStatus"
                            style="margin-top:7px;"
                        >
                            <el-radio label="1">使用</el-radio>
                            <el-radio label="0">不使用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- <el-form-item label="排序" prop="oderNum">
                        <el-input v-model="EditDetail.oderNum" placeholder="请输入输入两位正整数值" style="width: 200px;"/>
                    </el-form-item>-->
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button
                        size="small"
                        icon="el-icon-circle-close"
                        @click="ShowDetail = false"
                        class="cancelBtn"
                    >取 消</el-button>
                    <el-button
                        type="primary"
                        size="small"
                        @click="submitEditDetail"
                        class="submitBtn"
                        icon="el-icon-circle-check"
                    >确定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination/Pagination.vue';

export default {
    name: 'reasonTypePfCall',
    components: {
        Pagination,
    },
    data() {
        return {
            statusOfCall: [
                {
                    value: '1',
                    label: '使用',
                },
                {
                    value: '0',
                    label: '未使用'
                },
                {
                    value: '2',
                    label: '全部'
                },
            ],
            //大类查询
            formData: {
                status: '2'//来电原因状态
            },
            //小类查询
            formDataDetail: {
                status: '2'//来电原因状态
            },
            //大类表格数据
            bigtableData: [],
            // 小类表格数据
            smalltableData: [],
            // 当前页码
            currentPage: 1,
            // 页码大小
            pageSize: 10,
            // 总数
            total: 0,
            // 当前页码
            currentPageDetail: 1,
            // 页码大小
            pageSizeDetail: 10,
            // 总数
            totalDetail: 0,
            // 搜索loading
            searchLoading: false,
            // 重置loading
            resetLoading: false,
            selections: [],
            // 新增字典字段
            Edit: {
                operationName: null,
                // operationRes:false,
                operationStatus: null,
                // oderNum: null,
            },
            rowObj: {},
            dictValue: '',
            formRules: {
                operationName: [
                    { required: true, message: '请输入类别名称', trigger: 'blur' },
                    { max: 30, message: '字符最大长度为30', trigger: 'blur' },
                ],
                // operationRes: [
                //     { required: true, message: '请输入字典编码', trigger: 'blur' },
                // ],
                operationStatus: [
                    { required: true, message: '请选择是否使用', trigger: 'blur' },
                    { max: 30, message: '字符最大长度为30', trigger: 'blur' },
                ],
                // oderNum: [
                //     { required: true, message: '请输入字典编码', trigger: 'blur' },
                //     { pattern: /^[0-9]+$/, message: '请输入数字', trigger: 'blur' },
                // ],
            },
            formRulesDetail: {
                operationName: [
                    { required: true, message: '请输入类别名称', trigger: 'blur' },
                    { max: 30, message: '字符最大长度为30', trigger: 'blur' },

                ],
                // operationRes: [
                //     { required: true, message: '请输入字典编码', trigger: 'blur' },
                // ],
                operationStatus: [
                    { required: true, message: '请选择是否使用', trigger: 'blur' },
                    { max: 30, message: '字符最大长度为30', trigger: 'blur' },
                ],
                // oderNum: [
                //     { required: true, message: '请输入字典编码', trigger: 'blur' },
                //     { pattern: /^[0-9]+$/, message: '请输入数字', trigger: 'blur' },
                // ],
            },
            EditTitleDetail: '',
            Show: false,
            ShowDetail: false,
            EditTitle: '',
            // 新增字典详情字段
            EditDetail: {
                operationName: null,
                // operationRes:false,
                operationStatus: null,
                operationParent: ''
                // oderNum: null,
            },
            operationParent: ''
        }
    },
    mounted() {
        this.getInitData(this.formData);
    },
    methods: {
        // 获取大类表格数据
        getInitData(formData) {
            let params = {
                ...formData,
                pageNum: this.currentPage,
                pageSize: this.pageSize
            }
            this.$post.callSummary.pageMainType(params).then(res => {
                this.pageLoading = false
                // console.log(res.data,'大类原因')
                if (res.data.content != null && res.data.success) {
                    this.bigtableData = res.data.content.records || []
                    this.total = res.data.content.total
                } else {
                    this.$alert(res.data.msg, '提示', {
                        customClass: 'error'
                    })
                }
            })
        },
        handleSelectChange(val) {
            this.selections = val;
        },
        // 点击某一行查询详情
        handleClick(row, flag) {
            this.dictValue = row.operationId;
            this.rowObj = row
            if (flag) {
                this.currentPageDetail = 1;
                this.pageSizeDetail = 10;
            }
            let params = {
                operationParent: row.operationId,
                status: this.formDataDetail.status,
                pageNum: this.currentPageDetail,
                pageSize: this.pageSizeDetail
            };
            this.$post.callSummary.pageSpecific(params)
                .then((res) => {

                    if (res.data.success && res.data.content != null) {
                        // console.log(res.data.content)
                        this.smalltableData = res.data.content.records;
                        this.operationParent = row.operationId
                        this.totalDetail = res.data.content.total;
                    }
                });
            // console.log(this.currentPageDetail);
        },
        // 点击大类搜索
        hanleBigsearch() {
            this.currentPage = 1;
            this.pageSize = 10;
            if (this.formData.status === '') {
                this.formData.status = '2'
            }
            if (this.formDataDetail.status === '') {
                this.formDataDetail.status = '2'
            }
            this.getInitData(this.formData);
            this.smalltableData = [];
            this.totalDetail = 0;
        },
        // 点击大类重置
        handlebigReset() {
            this.formData = {
                operationStatus: ''
            };
            this.getInitData(this.formData);
            this.smalltableData = [];
            this.totalDetail = 0;
        },
        // 点击小类搜索
        hanleSmallsearch() {
            this.currentPageDetail = 1;
            this.pageSizeDetail = 10;
            let params = Object.assign({}, this.rowObj, this.formDataDetail);
            this.handleClick(params, true);
        },
        // 点击小类重置
        handlesmallReset() {
            this.formDataDetail = {
                operationStatus: ''
            };
            let params = Object.assign({}, this.rowObj, this.formDataDetail);
            this.handleClick(params, true);
        },
        // 点击大类新增
        hanlePush() {
            this.EditTitle = '添加字典大类类别';
            this.Edit = {
                operationName: null,
                // operationRes:false,
                operationStatus: null,
            };
            this.Show = true;
            // 解决一进来就进行表单验证问题
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 点击小类新增详情
        hanlePushDetail() {
            this.EditTitleDetail = '添加小类类别';
            this.EditDetail = {
                operationName: null,
                // operationRes:false,
                operationStatus: null,
            };
            this.ShowDetail = true;
            // 解决一进来就进行表单验证问题
            if (this.$refs.EditDetail) {
                this.$refs.EditDetail.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.EditDetail.resetFields();
                });
            }
        },
        // 点击大类编辑
        handleEdit(row) {
            this.EditTitle = '修改大类类别';
            this.Edit = JSON.parse(JSON.stringify(row));
            this.Show = true;
            // console.log(this.Edit.operationRes,'大类约束')
            // this.Edit.operationRes = this.Edit.operationRes === '0' ? false : true
            // console.log(this.Edit.operationRes,'大类约束')
            // // 解决一进来就进行表单验证问题
            if (this.$refs.Edit) {
                // this.Edit.operationRes = this.Edit.operationRes === 0 ? false : true
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 点击编辑详情
        handleEditDetail(row) {
            this.EditTitleDetail = '修改小类类别';
            this.EditDetail = JSON.parse(JSON.stringify(row));
            this.EditDetail.dictValue = this.dictValue;
            this.ShowDetail = true;
            // this.EditDetail.operationRes = this.EditDetail.operationRes === '0' ? false : true
            if (this.$refs.EditDetail) {
                this.$refs.EditDetail.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.EditDetail.resetFields();
                });
            }
        },
        // 单个删除类别
        handleDelete(row) {
            this.$confirm('确认删除该类别？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    this.$post.callSummary.deleteMainType({ operationId: row.operationId })
                        .then((res) => {
                            if (res.data.success) {
                                this.$message.success('删除成功！');
                                if (this.bigtableData.length === 1) {
                                    this.currentPage = this.currentPage - 1;
                                }
                                this.getInitData(this.formData);
                                this.smalltableData = [];
                                this.totalDetail = 0;
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                });
        },
        // 单个删除类别详情
        handleDeleteDetail(row) {
            this.$confirm('确认删除该类别？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    this.$post.callSummary.deleteSpecific({ operationId: row.operationId })
                        .then((res) => {
                            if (res.data.success) {
                                this.$message.success('删除成功！');
                                if (this.smalltableData.length === 1) {
                                    this.currentPageDetail = this.currentPageDetail - 1;
                                }
                                this.handleClick(this.rowObj, false);
                            } else {
                                this.$message.error('删除失败！');
                            }
                        });
                })
                .catch(() => {
                });
        },
        // 批量删除
        hanleBatchDeleteDetail() {
            if (this.selections.length <= 0) {
                this.$message.warning('至少选择一项进行删除！')
                return;
            }
            let arr = [];
            this.selections.forEach((item) => {
                arr.push(item.id);
            })
            this.$confirm('确认删除该类别？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    this.$post.dictDetail.deleteDictDetailBatch(arr)
                        .then((res) => {
                            if (res.data.success) {
                                this.$message.success('删除成功！');
                                if (this.smalltableData.length === 1) {
                                    this.currentPageDetail = this.currentPageDetail - 1;
                                }
                                this.handleClick(this.rowObj, false);
                            } else {
                                this.$message.error('删除失败！');
                            }
                        });
                })
                .catch(() => {
                });
        },
        // 新增大类点击确定按钮
        submitEdit() {

            if (this.Edit.operationId) {
                // 编辑
                this.$refs.Edit.validate((valid) => {
                    if (valid) {
                        // this.Edit.operationRes = this.Edit.operationRes === true ? '1' : '0'
                        this.$post.callSummary.updateMainType(this.Edit)
                            .then((res) => {
                                console.log(res.data)
                                if (res.data.success) {
                                    this.$message.success('修改成功！');
                                    this.getInitData(this.formData);
                                    this.Show = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        // if( this.Edit.operationRes === '0') {
                        //     this.operationRes = false
                        // }else if(this.Edit.operationRes === '1') {
                        //     this.operationRes = true
                        // }
                        this.$message.warning('请完成表单填写！');
                    }
                });
            } else {
                // 添加
                // console.log(this.Edit)
                this.$refs.Edit.validate((valid) => {
                    if (valid) {
                        // this.Edit.operationRes = this.Edit.operationRes === true ? '1' : '0'
                        this.$post.callSummary.addMainType(this.Edit)
                            .then((res) => {
                                console.log(res.data)
                                if (res.data.success) {
                                    this.$message.success('添加成功！');
                                    // this.Edit.operationRes = false
                                    this.getInitData(this.formData);
                                    this.smalltableData = [];
                                    this.totalDetail = 0;
                                    this.Show = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            }
        },
        // 新增小类点击确定按钮
        submitEditDetail() {
            if (this.EditDetail.operationId) {
                // 编辑
                this.$refs.EditDetail.validate((valid) => {
                    if (valid) {
                        // this.EditDetail.operationRes = this.EditDetail.operationRes === true ? '1' : '0'
                        this.EditDetail.operationParent = this.operationParent
                        this.$post.callSummary.updateSpecific(this.EditDetail)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('修改成功！');
                                    this.handleClick(this.rowObj, false);
                                    this.ShowDetail = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            } else {
                // 添加
                this.$refs.EditDetail.validate((valid) => {
                    if (valid) {
                        // this.EditDetail.operationRes = this.EditDetail.operationRes === true ? '1' : '0'
                        this.EditDetail.operationParent = this.operationParent
                        this.$post.callSummary.addSpecific(this.EditDetail)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('添加成功！');
                                    this.handleClick(this.rowObj, true);
                                    this.ShowDetail = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            }
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData(this.formData);
            this.smalltableData = [];
            this.totalDetail = 0;
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.getInitData(this.formData);
            this.smalltableData = [];
            this.totalDetail = 0;
        },
        // 页码切换方法
        hanleChangeCurrentPageDetail(val) {
            this.currentPageDetail = val;
            this.handleClick(this.rowObj, false);
        },
        // 切换分页大小方法
        handleChangeSizeDetail(val) {
            this.pageSizeDetail = val;
            this.handleClick(this.rowObj, false);
        },
    },
}
</script>
<style lang="scss">
.reasonTypePfCall {
    .el-form-item__content {
        text-align: left;
    }
    .el-form {
        text-align: left;
    }
}
</style>
<style lang="scss" scoped>
.reasonTypePfCall {
    min-height: 100%;
    background-color: #fff;
    // border-radius: 8px;
    overflow: hidden;
    padding: 20px;
    .el-form-item__content {
        text-align: left;
    }
}
</style>
